/**
 * Created by Administrator on 2016/9/4.
 */
new Vue ({
    el : '#wrapper'
})
$('#trendDate').change(function () {
    var checkText=$(this).find("option:selected").text()
    checkText = checkText.substring(0,checkText.length - 1)
    
    $.ajax({
        type: "get",
        url: '/mohe/front/mohe/ajaxGetReportData',
        data: {
            'period':checkText,
            'orderId':orderId,
            'curCode':curCode
        },
        dataType:'json',
        success: function(msg){
            var data = msg.msg
            Option(data)
        },
    });
})

$('.choose-date').on('click','span.dark',function(){
    $(this).removeClass('dark')
    $(this).siblings().addClass('dark')
    $('table').toggleClass('display')
})
var myChart = echarts.init(document.getElementById('echart'));
function Option(msg) {
    
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        color: ['#fc5c62','#516384'],
        grid: {
            containLabel: 'ture',
            top: '40',
            right: '3%',
            left: '3%',
            bottom: '40'
        },
        toolbox: {
            feature: {
                dataView: {show: false, readOnly: false},
                magicType: {show: false, type: ['line', 'bar']},
                restore: {show: false},
                saveAsImage: {show: false}
            }
        },
        legend: {
            data:['曝光数','线索数'],
            bottom: '0'

        },
        xAxis: [
            {
                type: 'category',
                data: msg.date
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '线索数',
                min: 0,
                max: initY(msg.cluesNumk),
                interval: initY(msg.cluesNumk)/5,
                axisLabel: {
                    formatter: '{value} '
                }
            },
            {
                type: 'value',
                name: '曝光数',
                min: 0,
                max: initY(msg.showNumk),
                interval: initY(msg.showNumk)/5,
                axisLabel: {
                    formatter: '{value} '
                }
            }
        ],
        series: [
            {
                name:'曝光数',
                type:'bar',
                barWidth: '20',
                yAxisIndex: 1,
                data:msg.showNumk
            },

            {
                name:'线索数',
                type:'line',
                yAxisIndex: 0,
                data:msg.cluesNumk
            }
        ]
    };
    myChart.setOption(option);
}
function initY(arr) {
    var num = Math.max.apply(null, arr)
    var length = num.toString().length
    var y = Math.ceil(num/(Math.pow(10,length-1)))
    var Ymax = y*Math.pow(10,length-1)
    if (Ymax < 5) {
        return 5
    }else{
        return Ymax        
    }
} 
function Process(a) {
    if(a>3 && a<100){
        $('.bar-inner').animate({
            'width':a*0.95+'%'
        },1000)
        $('.xiniu').animate({
            'left': a*0.95+'%'
        },1000)
        $('.tooltip').animate({
            'left':a*0.78 + '%'
        },1000)
    }else if(a<3||a==3){
        $('.bar-inner').css('width',a*0.95+'%')
        $('.tooltip').css('left',a*0.78 + '%')
        $('.xiniu').css('left',a*0.95+'%')
    }else if(a>100 || a == 100) {
        $('.bar-inner').css('background-color','#fc5c62')
        $('.m-icon.m-xiniu').css('color','#fc5c62')
        $('.tooltip').addClass('red')
        $('.sanjiao-wrap').addClass('red')
        $('.bar-inner').animate({
            'width': '95%'
        },1000)
        $('.xiniu').animate({
            'left': '95%'
        },1000)
        $('.tooltip').animate({
            'left': '78%'
        },1000)
    }
    
}
window.onload=function(){
    var argu = $('.m-icon.m-xiniu').attr('data-attr')
    argu = +argu.substring(0,argu.length-1)
    Process(argu)
}

Option(init)

